<template>
  <div id="priceChanges">
    <h2>{{ cate + msg }}</h2>
    <br />
    <div>
      <button class="btn btn-primary" v-on:click="changeType('bar')">
        柱状图
      </button>
      <button class="btn btn-success" v-on:click="changeType('line')">
        折线图
      </button>
      <div
        id="priceChangesChart"
        class="chart"
        :style="{ width: '100%', height: '300px' }"
      ></div>
    </div>
    <div
      id="priceChangesChartBar"
      class="chart"
      :style="{ width: '100%', height: '600px' }"
    ></div>
  </div>
</template>


<script>
export default {
  name: "productsDataDisplay",
  data() {
    return {
      msg: "的近五日全国均价走向",
      chart: "",
      chartBar: "",
      price: [],
      date: [],
      priceData: ["h"],
      priceChanges: [],
      option: {
        legend: {},
        tooltip: {},
        xAxis: [
          {
            type: "category",
            gridIndex: 0,
            data: [],
          },
        ],
        yAxis: [{ gridIndex: 0 }],
        grid: {
          left: "5%",
          x: 20,
          y: 30,
          x2: 20,
          y2: 35,
        },
        series: [
          {
            name: "",
            type: "line",
            data: [],
            lineStyle: {
              normal: {
                color: "blue",
                width: 3,
              },
            },
          },
        ],
      },
    };
  },
  props: ["cate"],
  methods: {
    getInfo(cateName) {
      this.axios
        .get(
          "http://122.51.157.58:8081/api-service/getByStartEnd?key=123456&cateName=" +
            cateName
        )
        .then((body) => {
          var result = body.data;
          for (var i = 0; i < result.data.result.length; i++) {
            this.price.push(result.data.result[i].nowAvgPrice);
            this.date.push(result.data.result[i].marketDate);
            this.priceChanges.push(result.data.result[i].priceChange);
            this.priceData.push({
              value: result.data.result[i].nowAvgPrice,
              name: result.data.result[i].marketDate,
            });
          }

          const optionBar = {
            legend: {
              top: "bottom",
            },
            toolbox: {
              show: true,
              feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true },
              },
            },
            series: [
              {
                name: "Nightingale Chart",
                type: "pie",
                radius: [50, 250],
                center: ["50%", "50%"],
                roseType: "area",
                itemStyle: {
                  borderRadius: 8,
                },
                data: this.priceData,
              },
            ],
          };
          this.option.xAxis[0].data = this.date;
          this.option.series[0].data = this.price;
          this.option.series[0].name = cateName + "价格走向";
          this.chart.setOption(this.option);
          this.chartBar.setOption(optionBar);
        });
    },
    changeType(val) {
      this.option.series[0].type = val;
      this.chart.setOption(this.option);
    },
  },
  mounted() {
    this.chart = this.echarts.init(
      document.getElementById("priceChangesChart")
    );
    this.chartBar = this.echarts.init(
      document.getElementById("priceChangesChartBar")
    );
    this.getInfo(this.cate);
  },
};
</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "@/../../static/css/dashboard.css";
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
.chart {
  margin: auto;
  position: relative;
}
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}
</style>